<template>
  <view class="celebrity-detail">
    <!-- 加载中 -->
    <view v-if="loading" class="loading">
      <wd-loading size="large" />
    </view>

    <template v-else>
      <!-- 基本信息 -->
      <view class="basic-info">
        <image class="cover-image" :src="celebrityDetail.coverImage" mode="aspectFill" />
        <view class="info-content">
          <view class="name-title">
            <text class="name">{{ celebrityDetail.name }}</text>
            <text class="title">{{ celebrityDetail.title }}</text>
          </view>
          <view class="meta-info">
            <text class="dynasty">{{ celebrityDetail.dynasty }}</text>
            <text class="achievement">{{ celebrityDetail.achievement }}</text>
          </view>
        </view>
      </view>

      <!-- 生平简介 -->
      <view class="section">
        <view class="section-title">生平简介</view>
        <view class="section-content">
          <text class="biography">{{ celebrityDetail.biography }}</text>
        </view>
      </view>

      <!-- 主要成就 -->
      <view class="section">
        <view class="section-title">主要成就</view>
        <view class="section-content">
          <view
            v-for="(item, index) in celebrityDetail.achievements"
            :key="index"
            class="achievement-item"
          >
            <view class="achievement-title">{{ item.title }}</view>
            <view class="achievement-desc">{{ item.description }}</view>
          </view>
        </view>
      </view>

      <!-- 历史影响 -->
      <view class="section">
        <view class="section-title">历史影响</view>
        <view class="section-content">
          <text class="influence">{{ celebrityDetail.influence }}</text>
        </view>
      </view>

      <!-- 相关文物 -->
      <view class="section">
        <view class="section-title">相关文物</view>
        <view class="section-content">
          <scroll-view class="artifact-scroll" scroll-x>
            <view class="artifact-list">
              <view
                v-for="(item, index) in celebrityDetail.artifacts"
                :key="index"
                class="artifact-item"
                @click="viewArtifact(item)"
              >
                <image class="artifact-image" :src="item.image" mode="aspectFill" />
                <view class="artifact-name">{{ item.name }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 相关文献 -->
      <view class="section">
        <view class="section-title">相关文献</view>
        <view class="section-content">
          <view
            v-for="(item, index) in celebrityDetail.literature"
            :key="index"
            class="literature-item"
          >
            <view class="literature-title">{{ item.title }}</view>
            <view class="literature-author">{{ item.author }}</view>
            <view class="literature-desc">{{ item.description }}</view>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

// 加载状态
const loading = ref(true);

// 名人详情数据
interface Achievement {
  title: string;
  description: string;
}

interface Artifact {
  id: string;
  name: string;
  image: string;
}

interface Literature {
  title: string;
  author: string;
  description: string;
}

interface CelebrityDetail {
  id: string;
  name: string;
  title: string;
  dynasty: string;
  achievement: string;
  coverImage: string;
  biography: string;
  achievements: Achievement[];
  influence: string;
  artifacts: Artifact[];
  literature: Literature[];
}

const celebrityDetail = ref<CelebrityDetail>({
  id: "",
  name: "",
  title: "",
  dynasty: "",
  achievement: "",
  coverImage: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
  biography: "",
  achievements: [],
  influence: "",
  artifacts: [],
  literature: [],
});

// 获取名人详情
const fetchCelebrityDetail = (id: string) => {
  // 模拟API请求
  setTimeout(() => {
    celebrityDetail.value = {
      id,
      name: "李时珍",
      title: "明代医药学家",
      dynasty: "明代",
      achievement: "《本草纲目》作者",
      coverImage: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
      biography:
        "李时珍（1518年-1593年），字东璧，号濒湖，湖北蕲春人。明代著名医药学家，著有《本草纲目》，是中国古代最著名的医药学家之一。他历时27年，走遍大江南北，采集药物标本，访问民间医生，最终完成了这部举世闻名的医药学巨著。",
      achievements: [
        {
          title: "《本草纲目》",
          description: "收录药物1892种，附图1109幅，是中国古代最完整的药物学著作。",
        },
        {
          title: "医学理论创新",
          description: '提出了"四气五味"理论，对中药学发展产生深远影响。',
        },
        {
          title: "临床实践",
          description: "行医50余年，积累了丰富的临床经验，治愈无数疑难杂症。",
        },
      ],
      influence:
        "李时珍的《本草纲目》不仅对中国医药学发展产生深远影响，还被翻译成多种文字，对世界医药学的发展也做出了重要贡献。他的科学精神和治学态度，至今仍为后人称颂。",
      artifacts: [
        {
          id: "1",
          name: "《本草纲目》手稿",
          image: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
        },
        {
          id: "2",
          name: "李时珍画像",
          image: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
        },
        {
          id: "3",
          name: "药箱",
          image: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
        },
      ],
      literature: [
        {
          title: "《本草纲目》",
          author: "李时珍",
          description: "中国明代医药学巨著，收录药物1892种，附图1109幅。",
        },
        {
          title: "《濒湖脉学》",
          author: "李时珍",
          description: "中医脉学专著，对脉诊理论有重要贡献。",
        },
        {
          title: "《奇经八脉考》",
          author: "李时珍",
          description: "研究经络学说的专著，对中医经络理论有重要影响。",
        },
      ],
    };
    loading.value = false;
  }, 1000);
};

// 查看文物详情
const viewArtifact = (artifact: any) => {
  uni.navigateTo({
    url: `/pages/work/family/artifact?id=${artifact.id}`,
  });
};

// 页面加载
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const id = (currentPage as any).$page?.options?.id;
  if (id) {
    fetchCelebrityDetail(id);
  }
});
</script>

<style lang="scss">
.celebrity-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.basic-info {
  position: relative;
  height: 400rpx;
  overflow: hidden;

  .cover-image {
    width: 100%;
    height: 100%;
    filter: brightness(0.7);
  }

  .info-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40rpx;
    color: #fff;

    .name-title {
      margin-bottom: 20rpx;

      .name {
        font-size: 48rpx;
        font-weight: bold;
        margin-right: 20rpx;
      }

      .title {
        font-size: 32rpx;
        opacity: 0.9;
      }
    }

    .meta-info {
      font-size: 28rpx;
      opacity: 0.8;

      .dynasty {
        margin-right: 20rpx;
      }
    }
  }
}

.section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 32rpx;
      background-color: #1989fa;
      border-radius: 3rpx;
    }
  }

  .section-content {
    color: #666;
    font-size: 28rpx;
    line-height: 1.6;
  }
}

.achievement-item {
  margin-bottom: 20rpx;

  .achievement-title {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 10rpx;
  }

  .achievement-desc {
    color: #666;
  }
}

.artifact-scroll {
  width: 100%;
  white-space: nowrap;

  .artifact-list {
    display: inline-flex;
    padding: 10rpx 0;

    .artifact-item {
      width: 200rpx;
      margin-right: 20rpx;
      text-align: center;

      .artifact-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 8rpx;
        margin-bottom: 10rpx;
      }

      .artifact-name {
        font-size: 26rpx;
        color: #333;
        white-space: normal;
        line-height: 1.4;
      }
    }
  }
}

.literature-item {
  margin-bottom: 30rpx;

  .literature-title {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 10rpx;
  }

  .literature-author {
    font-size: 26rpx;
    color: #1989fa;
    margin-bottom: 10rpx;
  }

  .literature-desc {
    color: #666;
  }
}
</style>
